function Canvas(id){
    this.context = null;

    this.init = function(){
        var canvas = document.getElementById(id);
        this.context = canvas.getContext('2d');
    };

    this.draw1 = function(){
        this.context.fillStyle = '#000000';
        this.context.fillRect(0, 0, 100, 100);


        this.context.clearRect(20, 20, 50, 50);
        // this.context.fillStyle = '#ffffff';
        // this.context.fillRect(100, 100, 10, 100);

        this.context.strokeStyle = 'red';
        this.context.lineWidth = 10;
        this.context.lineCap = 'round';
        this.context.lineJoin = 'miter';
        this.context.beginPath();
        this.context.moveTo(200, 100);
        this.context.lineTo(100, 200);
        this.context.lineTo(300, 200);
        this.context.lineTo(200, 100);
        this.context.stroke();
        this.context.closePath();

        this.context.lineCap = 'square';
        this.context.beginPath();
        this.context.moveTo(300, 300);
        this.context.lineTo(400, 400);
        this.context.stroke();
        this.context.closePath();


        this.context.lineCap = 'butt';
        this.context.beginPath();
        this.context.moveTo(320, 300);
        this.context.lineTo(420, 400);
        this.context.stroke();
        this.context.closePath();

        var sangle = 0, eangle = 90;
        this.context.strokeStyle = '#cccccc';
        this.context.lineWidth = 3;
        this.context.beginPath();
        this.context.arc(400, 100, 50, sangle * Math.PI / 180, eangle * Math.PI / 180, true);
        this.context.stroke();
        this.context.closePath();

    };

    this.drawBazi = function(){
        this.context.strokeStyle = 'black';
        this.context.beginPath();
        this.context.lineWidth = 10;
        this.context.strokeRect(0, 0, 500, 500);
        this.context.closePath();


        // 圆心为250， 250，半径为200的圆
        this.context.lineWidth = 3;
        this.context.beginPath();
        this.context.arc(250, 250, 200, 0, Math.PI / 180 * 360, false);
        this.context.stroke();
        this.context.closePath();

        // 中间的十字
        this.context.beginPath();
        this.context.moveTo(0, 250);
        this.context.lineTo(500, 250);
        this.context.moveTo(250, 0);
        this.context.lineTo(250, 500);
        this.context.stroke();
        this.context.closePath();

        this.context.beginPath();
        // 中间的小圆圈，以250，250为圆心，画四个圈圈。
        for (var i = 50; i < 200; i += 50) {
            this.context.arc(250, 250, i, 0, Math.PI / 180 * 360, false);

        }
        this.context.stroke();
        this.context.closePath();
    };

    // 平方贝塞尔曲线
    this.drawQuadraticBezier = function(){
        var ctrol = new Point(100, 10);
        var start = new Point(200, 100);
        var end = new Point(100, 450);
        // 外框
        this.context.strokeRect(0, 0, 500, 500);
        // 贝塞尔平方曲线
        this.context.beginPath();
        this.context.moveTo(start.x, start.y);
        this.context.quadraticCurveTo(ctrol.x, ctrol.y, end.x, end.y);
        this.context.stroke();
        this.context.closePath();

        //贝塞尔平方曲线的控制点
        this.context.beginPath();
        this.context.strokeStyle = 'red';
        this.context.arc(ctrol.x, ctrol.y, 5, 0, Math.PI / 180 * 360);
        this.context.moveTo(start.x, start.y)
        this.context.arc(start.x, start.y, 5, 0, Math.PI / 180 * 360);
        this.context.moveTo(end.x, end.y);
        this.context.arc(end.x, end.y, 5, 0, Math.PI / 180 * 360);
        this.context.stroke();
        this.context.closePath();
        this.context.beginPath();
        this.context.strokeStyle = 'green';
        this.context.moveTo(start.x, start.y);
        this.context.lineTo(ctrol.x, ctrol.y);
        this.context.lineTo(end.x, end.y);
        this.context.stroke();
        this.context.closePath();
    }

    this.drawBezier = function(){
        this.context.strokeRect(0, 0, 500, 500);
        var p1 = new Point(50, 150);
        var p2 = new Point(450, 350);
        var start = new Point(250, 50);
        var end = new Point(250, 450);
        this.context.beginPath();
        this.context.moveTo(start.x, start.y);
        this.context.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, end.x, end.y);
        this.context.stroke();
        this.context.closePath();

        // 绘制控制点以及起点和终点
        this.context.beginPath();
        this.context.strokeStyle = 'red';
        this.context.arc(start.x, start.y, 5, 0, 2*Math.PI);
        this.context.closePath();
        this.context.moveTo(end.x, end.y);
        this.context.stroke();
        this.context.beginPath();
        this.context.arc(end.x, end.y, 5, 0, 2*Math.PI);
        this.context.closePath();
        this.context.stroke();
        this.context.beginPath();
        this.context.arc(p1.x, p1.y, 5, 0, 2*Math.PI);
        this.context.stroke();
        this.context.closePath();
        this.context.beginPath();
        this.context.arc(p2.x, p2.y, 5, 0, 2*Math.PI);
        this.context.stroke();
        this.context.closePath();

        // 连线
        this.context.strokeStyle = 'green';
        this.context.beginPath();
        this.context.moveTo(start.x, start.y);
        this.context.lineTo(p1.x, p1.y);
        this.context.lineTo(p2.x, p2.y);
        this.context.lineTo(end.x, end.y);
        this.context.lineTo(start.x, start.y);
        this.context.stroke();
        this.context.closePath();

    };

    this.draw = function(){
        this.context.strokeRect(0, 0, 500, 500);

        // this.context.setTransform(1, 0, 0, 1, 100, 100);
        this.context.save();
        this.context.translate(100, 100);
        this.context.strokeStyle = 'red';
        this.context.rotate(0.25 * Math.PI);
        this.context.scale(1, 1.5);
        this.context.fillRect(20, 20, 20, 20);
        this.context.restore();
        this.context.fillRect(100, 100, 10, 10);
    }
}

function Point(x, y) {
    this.x = x;
    this.y = y;
}


(function(){
    var canvas = new Canvas('canvas');
    canvas.init();
    canvas.draw();
})();

